<template>
  <div id="app" class="father">
    <!--头部订单详情-->
    <el-form :inline="true" :model="Remote" class="demo-form-inline formed">
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple-dark Remote">
            <el-form-item v-model="Remote.orderType"
              >预约异地委托服务</el-form-item
            >
          </div>
        </el-col>
      </el-row>
      <!--内容-->
      <div class="grid-content bg-purple">
        <!--左表单-->
        <el-row :gutter="20">
          <el-col :span="12" class="menued">
            <el-form
              :inline="true"
              class="demo-form-inline formed"
              :label-position="labelposition"
              label-width="110px"
            >
              <el-form-item :required="true" label="订单状态:">
                <el-select
                  v-model="formInline.orderStateNamec"
                  placeholder="选择状态"
                  @change="getOrderValue"
                >
                  <el-option
                    v-for="(item, orderState_id) in orderStateName"
                    :label="item.orderState_name"
                    :value="item.orderState_id"
                    :key="orderState_id"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item :required="true" label="是否需要赔款:">
                <el-radio-group
                  class="peikuan"
                  v-model="formInline.safeorderNeedmoney"
                >
                  <el-radio label="是"></el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item :required="true" label="是否发短信:">
                <el-radio-group v-model="formInline.safeorderSendmessage">
                  <el-radio label="是"></el-radio>
                  <el-radio label="否"></el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item :required="true" label="特定事项:">
                <el-input v-model="formInline.safeorderNotice"></el-input>
              </el-form-item>
              <el-form-item :required="true" label="短信内容:">
                <el-input
                  id="userMsg"
                  resize="none"
                  :rows="8"
                  type="textarea"
                  v-model="formInline.safeorderSms"
                ></el-input>
              </el-form-item>
              <el-form-item :required="true" size="large">
                <el-button type="primary" @click="textMsg">生成短信</el-button>
                <el-button type="primary" @click="sendMsg"
                  >发送给客户</el-button
                >
              </el-form-item>
              <el-form-item
                :required="true"
                label="短信内容:"
                class="driverMsg"
              >
                <el-input
                  id="driverMsg"
                  resize="none"
                  :rows="8"
                  type="textarea"
                  v-model="formInline.safeorderSmsdriver"
                ></el-input>
              </el-form-item>
              <el-form-item :required="true" size="large">
                <el-button type="primary" @click="driverMsg"
                  >生成短信</el-button
                >
                <el-button type="primary" @click="sendDriverMsg"
                  >发送给客户</el-button
                >
              </el-form-item>
            </el-form>
          </el-col>
          <!--右表单-->
          <el-col :span="12" class="menued">
            <el-form
              :inline="true"
              :model="formInline"
              class="demo-form-inline formed"
              :label-position="labelposition"
              label-width="110px"
            >
              <el-form-item :required="true" label="联系人:">
                <el-input v-model="formInline.safeorderUser"></el-input>
              </el-form-item>
              <el-form-item :required="true" label="联系电话:">
                <el-input v-model="formInline.safeorderUserphone"></el-input>
              </el-form-item>
              <el-form-item :required="true" label="车牌号:">
                <el-input v-model="formInline.safeorderCarnumber"></el-input>
              </el-form-item>
              <el-form
                :inline="true"
                :model="formInline"
                class="demo-form-inline"
                :label-position="labelposition"
                label-width="110px"
              >
                <el-form-item :required="true" label="拍照内容:">
                  <el-input
                    v-model="formInline.safeorderUserimage"
                    placeholder="行驶证，交强险保单（并上传海涛微信）收取：行驶证"
                  ></el-input>
                </el-form-item>
              </el-form>
            </el-form>
          </el-col>
        </el-row>
        <div class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="addmark">保 存</el-button>
        </div>
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //formInline表单的各个值名
      labelposition: "right",
      Remote: {
        orderType: "预约异地委托服务"
      },
      formInline: {
        send: "",
        safeorderNotice: "",
        safeorderCarnumber: "",
        safeorderUser: "",
        safeorderUserphone: "",
        safeorderUserimage: "",
        safeorderNeedmoney: "",
        safeorderSendmessage: "",
        safeorderSms: "",
        safeorderSmsdriver: "",
        senddriverName: "",
        orderStateNamec: ""
      },
      //获取订单状态
      orderStateName: []
    };
  },
  methods: {
    //当点击保存按钮时 触发的函数事件
    cancel() {
      this.$emit("getchidval");
    },
    addmark: function() {
      this.$emit("getchidval");
      console.log(this.Remote.orderType);
      this.$axios
        .post(
          this.$api.orderManage.add, //用post链接后台对应的接口
          JSON.stringify({
            safeorderType: "预约异地委托服务",
            safeorderGocompany: this.formInline.safeorderGocompany,
            safeorderNotice: this.formInline.safeorderNotice,
            safeorderCarnumber: this.formInline.safeorderCarnumber,
            safeorderUser: this.formInline.safeorderUser,
            safeorderUserphone: this.formInline.safeorderUserphone,
            safeorderUserimage: this.formInline.safeorderUserimage,
            driver_area: this.formInline.driver_area,
            safeorderBackdriver: this.formInline.safeorderBackdriver,
            safeorderNeedmoney: this.formInline.safeorderNeedmoney,
            safeorderSendmessage: this.formInline.safeorderSendmessage,
            safeorderSms: this.formInline.safeorderSms,
            safeorderSmsdriver: this.formInline.safeorderSmsdriver,
            safeorderStateid: this.orderState
          }), //将数据传给对应的数据库的值名
          {
            headers: {
              "Content-Type": "application/json"
            }
          }
        )
        .then(response => {
          console.log(response); //打印响应
          var result = response.data; //响应出来的数据复制给结果
          if (response.status === 200) {
            //当响应状态等于200时
            this.$alert("保存成功");
          } else {
            this.$alert(result.message);
          }
        })
        .catch(err => {
          this.$alert("请求出错");
          console.log(err);
        });
    },
    // cancel() {//当点击取消按钮时 触发的函数事件
    //   this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning'
    //   }).then(() => {
    //     this.$message({
    //       type: 'success',
    //       message: '删除成功!'
    //     });
    //     this.formInline.safeorderGocompany=""
    //     this.formInline.safeorderGocompany= ''
    //     this.formInline.safeorderNotice= ''
    //     this.formInline.safeorderCarnumber= ''
    //     this.formInline.safeorderUser= ''
    //     this.formInline.safeorderUserphone= ''
    //     this.formInline.safeorderUserimage= ''
    //     this.formInline.safeorderBackdriver= ''
    //     this.formInline.safeorderNeedmoney= ''
    //     this.formInline.safeorderSendmessage= ''
    //     this.formInline.safeorderSms= ''
    //     this.formInline.safeorderSmsdriver= ''
    //     this.formInline.orderStateNamec=""
    //   }).catch(() => {
    //     this.$message({
    //       type: 'info',
    //       message: '已取消删除'
    //     });
    //   });
    // },
    //获取取证司机区域
    getGetarea() {
      this.$axios
        .get(this.$api.orderManage.driversarea)
        .then(response => {
          if (response.data.code === "200") {
            console.log(response.data.data);
            this.area = response.data.data;
            this.sendarea = response.data.data;
          }
        })
        .catch(err => {
          this.$alert("数据异常");
          console.log(err);
        });
    },
    //获取
    //根据区域获取司机信息
    getdriver(driver) {
      console.log(driver);
      this.$axios
        .post(this.$api.orderManage.drivers, { area: driver })
        .then(response => {
          console.log(response);
          if (response.data.code === "200") {
            this.getdrivers = response.data.data;
            console.log("this.senddrives = ", this.senddrives);
          }
        })
        .catch(err => {
          this.$alert("数据异常");
          console.log(err);
        });
    },
    senddriver(val) {
      this.$axios
        .post(this.$api.orderManage.drivers, { area: val })
        .then(response => {
          console.log(response);
          if (response.data.code === "200") {
            this.senddrives = response.data.data;
            console.log(this.senddrives);
          }
        })
        .catch(err => {
          this.$alert("数据异常");
          console.log(err);
        });
    },
    //获取订单状态信息
    orderStateNameS() {
      this.$axios
        .post(this.$api.orderManage.orderstate)
        .then(response => {
          console.log("获取", response);
          if (response.data.code === "200") {
            this.orderStateName = response.data.data;
            console.log("this.orderStateName = ", this.orderStateName);
          }
        })
        .catch(err => {
          this.$alert("数据异常");
          console.log(err);
        });
    },
    getOrderValue(val) {
      this.orderState = val;
    },
    //用户短信生成按钮
    textMsg() {
      this.$message({
        message: "已成功生成短信",
        type: "success"
      });
    },
    //用户短信发送成功
    sendMsg() {
      document.getElementById("userMsg").value = "";
      this.$message({
        message: "已成功发送给用户",
        type: "success"
      });
    },
    //司机短信生成
    driverMsg() {
      this.$message({
        message: "已成功生成短信",
        type: "success"
      });
    },
    //司机短信发送
    sendDriverMsg() {
      document.getElementById("driverMsg").value = "";
      this.$message({
        message: "已成功发送给司机",
        type: "success"
      });
    }
  },

  created() {
    this.getGetarea();
    this.orderStateNameS();
  }
};
</script>

<style scoped>
.Remote {
  border-bottom: 1px solid grey;
  padding: 10px 0;
  text-align: center;
  margin-bottom: 20px;
}
.el-input {
  width: 230px;
}
.el-select {
  width: 110px;
  margin-right: 10px;
}
.menued {
  width: 430px;
  margin-left: 30px;
}
.formed {
  text-align: left;
}
#title {
  text-align: left;
}
.dialog-footer {
  float: right;
}
.father {
  overflow: hidden;
}
.driverMsg {
  margin-top: 20px;
}
</style>
